<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularJS- 55课 scope隔离作用域之=双向文本绑定</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript" src='../js/jquery.min.js'></script>
</head>
<body ng-app='app' ng-controller='myctrl'>
    <input type="text" name="" ng-model='color'><br>
    <hr>
    <div mycms my-color='color'></div>              <!-- 注意区别此处 -->
</body>
    <script>
        var app = angular.module('app',[]);
        app.directive('mycms',[function(){
            return {
                restrict:'AE',
                template:"{{ name }} <span style='color:{{ color1 }}'>网易云课堂</span> <input type='text' ng-model='color1'/>",
                //通过 = 实现双向数据绑定。属性my-color的值会赋值给指令的 color1 变量；同时指令的color1变量也会直接传递给控制器
                scope:{color1:'=myColor'}   // = 实现双向数据绑定之后，scope相当于取值 true
            }
        }]);
        app.controller('myctrl',['$scope',function($scope){
            $scope.color = 'red';
            $scope.name = '慕课网';
        }]);
    </script>
</html>